<template>
    <div>
        
       
            <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed" style="height:600px;overflow-y:scroll;">
                 <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" @bottom-status-change="handleBottomChange" ref="loadmore" :auto-fill="false">
                    <li class="mui-table-view-cell" v-for="n in list" :key="n.newsId">
                        <router-link :to="'/home/newsInfo/'+n.newsId">
                            <div class="mui-table">
                                <div class="mui-table-cell mui-col-xs-10">
                                    <h4 class="mui-ellipsis">{{n.newsTitle}}</h4>
                                    <p class="mui-h6 mui-ellipsis">
                                    时间： <span>{{n.newsDate | dateFmt('YYYY-MM-DD')}}</span>
                                    点击次数：{{n.readNum}}
                                    </p>
                                </div>
                            </div>
                        </router-link>
                    </li>
                
                 </mt-loadmore>
                </ul>

           
             
    </div>
</template>
<script>
import { Loadmore,Toast } from 'mint-ui';
export default {
    data(){
        return {

            newsList:[],
            current:1,
            totalPage:0,
            allLoaded:false,
            bottomStatus:"",
            list:[]
        }
    },
   
    methods:{
        //获取新闻
        getPages(){
            this.$ajax({
                url:"/news/"+this.current,
                method:"get"
            }).then(response=>{
                console.log(response.data.message);
                this.newsList = response.data.message;
                this.totalPage = response.data.totalPage;
                if(this.current == 1){
                    this.list = this.newsList;

                }else{
                    this.list.push(...this.newsList);
                }
            });
        },
        //下拉刷新
        loadTop() {
            Toast("正在刷新。。。。");
            this.current = 1;
            this.getPages();
            this.$refs.loadmore.onTopLoaded();
        },
        //上拉加载
        loadBottom(){
            Toast("正在拼命加载中。。。。");
             this.current = this.current + 1;
            if(this.current > this.totalPage){
                Toast('数据已经加载完毕。。。。');
                this.allLoaded = true;
                return;
            }
            this.getPages();
              this.$refs.loadmore.onBottomLoaded();

        },
         handleBottomChange(status) {
                this.bottomStatus = status;
            },
        
    },
    created(){
        this.getPages();
    },
    mounted(){
         this.$nextTick(function () {
                 this.contentH = document.documentElement.clientHeight - 
                 this.$refs.wrapper.getBoundingClientRect().top;
            })
    }
           
       
}

</script>
<style scoped>

</style>